<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="pragma" content="no-cache" />
	<script src="vue.global.prod.js"></script>
	<script src="axios.min.js"></script>
	<script src="noty.min.js"></script>
	<script src="index.js"></script>
	<link rel="stylesheet" href="noty.css" />
	<link rel="stylesheet" href="mint.css" />
	<link rel="stylesheet" href="style.css" />
	<link rel="shortcut icon" href="favicon.ico" />
	<style>
		.yes {
			background-color: #602f88;
			color: #fff;
			transition: 0.2s;
		}

		table table th {
			background-color: #f9f1ff;
			transition: 0.2s;
			cursor: pointer;
		}

		td th,
		td td {
			border: 1px solid #000;
		}
	</style>
	<title>选择关键字</title>
</head>

<body>
	<header class="page-head">
		<a class="title" href="/log">Format Name</a>
		<div class="compass">
			<a href="https://gitee.com/cxh1205/FormatName/blob/master/README.md#%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C"
				target="_blank">使用手册</a>
		</div>
	</header>
	<table id="body">
		<tr>
			<td>
				<div @click="back" class="button">返回</div>
				<div @click="submit" class="button submit">提交</div>
			</td>
		</tr>
		<tr>
			<td>
				<div class="tip">
					点击表头可以选择关键字，鼠标放在表头上可查看不能作为关键字的原因
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<table>
					<tr>
						<th v-for="key in data" :class="{yes:key['isKeyWord']}" :title="key['reason']"
							@click="key['isKeyWord']=!key['isKeyWord']">
							{{key['key']}}
						</th>
					</tr>
					<tr v-for="i in range(0,data[0]['values'].length)">
						<td v-for="key in data">{{key["values"][i]}}</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<div @click="back" class="button">返回</div>
				<div @click="submit" class="button submit">提交</div>
			</td>
		</tr>
	</table>
	<script>
		const app = Vue.createApp({
			data() {
				return {
					data: [],
				};
			},
			methods: {
				get_data() {
					axios.post("GetData").then((res) => {
						this.data = res.data;
					}).catch((res) => {
						notify("未知错误，请复制黑色窗口中最后一行的报错发给作者寻找原因", "error");
					});
				},
				range(start, stop, step = 1) {
					return Array(Math.ceil((stop - start) / step))
						.fill(start)
						.map((x, y) => x + y * step);
				},
				submit() {
					for (var i = 0; i < this.data.length; i++) {
						if (this.data[i]["isKeyWord"]) break;
					}
					if (i == this.data.length) {
						notify("请至少选择一个关键字", "error");
					} else {
						axios.post("SubmitData", this.data).then((res) => {
							if (res.data["code"] == 0) {
								notify(res.data["msg"], "success");
								setTimeout(() => {
									document.location.href = "/";
								}, 1000);
							} else {
								notify(res.data["msg"], "error");
							}
						}).catch((res) => {
							notify("未知错误，请复制黑色窗口中最后一行的报错发给作者寻找原因", "error");
						});
					}
				},
				back() {
					document.location.href = "/GetExcel";
				},
			},
			created() {
				this.get_data();
			},
		});
		const vm = app.mount("#body");
	</script>
</body>

</html>